<template>
	<view class="container">
		<view class="status_bar" />
		
		<!-- 头部导航 -->
		<view class="header">
			<view class="menu-icon" @click="toggleDrawer">
				<u-icon name="list" size="24" color="#333"></u-icon>
			</view>
			<view class="title">
				<text>{{ currentList ? currentList.title : 'TickTock' }}</text>
			</view>
			<view class="action-icon">
				<u-icon name="setting" size="24" color="#333"></u-icon>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<text>当前选中的清单: {{ currentList ? currentList.title : '无' }}</text>
			<text>当前选中的分组: {{ currentGroup ? currentGroup.name : '无' }}</text>
		</view>
		
		<!-- 清单抽屉 -->
		<list-drawer 
			:visible="drawerVisible" 
			@close="closeDrawer"
			@add-group="showAddGroupPopup"
		/>
		
		<!-- 分组弹窗 -->
		<group-popup
			:show="showGroupPopup"
			:groupData="currentEditGroup"
			:isEdit="isEditGroupMode"
			:listId="groupListId"
			@close="hideGroupPopup"
			@submit="submitGroupForm"
		/>
	</view>
</template>

<script>
	import { themeManager } from '@/utils/theme';
	import ListDrawer from '@/components/ListDrawer.vue';
	import GroupPopup from '@/components/list/GroupPopup.vue';

	export default {
		components: {
			ListDrawer,
			GroupPopup
		},
		data() {
			return {
				title: 'TickTock时间管理',
				showThemePopup: false,
				isDarkMode: false,
				drawerVisible: false,
				// 分组相关
				showGroupPopup: false,
				currentEditGroup: null,
				isEditGroupMode: false,
				groupListId: ''
			}
		},
		computed: {
			// 当前选中的清单
			currentList() {
				if (!this.$store || !this.$store.getters) return null;
				return this.$store.getters['lists/getCurrentList'];
			},
			// 当前选中的分组
			currentGroup() {
				if (!this.$store || !this.$store.getters) return null;
				return this.$store.getters['lists/getCurrentGroup'];
			}
		},
		onLoad() {
			// 获取当前主题
			const currentTheme = themeManager.getCurrentTheme();
			this.isDarkMode = currentTheme === 'dark';
			
			// 监听主题变化
			uni.$on('themeChange', this.handleThemeChange);

			// 初始化数据
			if (this.$store && this.$store.dispatch) {
				this.$store.dispatch('lists/initLists');
			}
		},
		onUnload() {
			// 移除监听
			uni.$off('themeChange', this.handleThemeChange);
		},
		methods: {
			handleThemeChange(data) {
				this.isDarkMode = data.theme === 'dark';
			},
			switchTheme() {
				themeManager.toggleTheme();
				this.isDarkMode = themeManager.getCurrentTheme() === 'dark';
			},
			onThemeChange(value) {
				const theme = value ? 'dark' : 'light';
				themeManager.applyTheme(theme);
			},
			goToTask() {
				uni.switchTab({
					url: '/pages/task/index'
				})
			},
			goToTimer() {
				uni.switchTab({
					url: '/pages/timer/index'
				})
			},
			goToStatistics() {
				uni.switchTab({
					url: '/pages/statistics/index'
				})
			},
			startUse() {
				this.$refs.uToast.show({
					title: '欢迎使用TickTock',
					type: 'success',
					icon: true
				});
			},
			openThemeSettings() {
				this.showThemePopup = true;
			},
			closeThemePopup() {
				this.showThemePopup = false;
			},
			// 切换抽屉
			toggleDrawer() {
				this.drawerVisible = !this.drawerVisible;
			},
			
			// 关闭抽屉
			closeDrawer() {
				this.drawerVisible = false;
			},
			
			// 显示添加分组弹窗
			showAddGroupPopup(list) {
				this.isEditGroupMode = false;
				this.currentEditGroup = null;
				this.groupListId = list.id;
				this.showGroupPopup = true;
			},
			
			// 隐藏分组弹窗
			hideGroupPopup() {
				this.showGroupPopup = false;
				this.currentEditGroup = null;
				this.groupListId = '';
			},
			
			// 提交分组表单
			submitGroupForm(groupData) {
				try {
					if (!this.$store || !this.$store.dispatch) {
						throw new Error('Store not available');
					}
					
					if (this.isEditGroupMode) {
						// 编辑模式
						this.$store.dispatch('lists/updateGroup', {
							listId: groupData.listId,
							groupData
						});
						uni.showToast({
							title: '分组已更新',
							icon: 'success'
						});
					} else {
						// 新建模式
						this.$store.dispatch('lists/createGroup', {
							listId: groupData.listId,
							groupData
						});
						uni.showToast({
							title: '分组已创建',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('保存分组失败:', error);
					uni.showToast({
						title: '保存分组失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: var(--background-color);
	}

	.header {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		height: 50px;
		background-color: #ffffff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	}

	.menu-icon {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.action-icon {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
</style>
